{% extends 'base.html' %}

{% block header %}
  <h1>{% block title %}Game{% endblock %}</h1>
{% endblock %}

{% block content %}
<form method="get">
    <input type="submit" name="button" value="match">
    <!-- <input type="submit" name="button" value="grade_rank"> -->
  </form>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <style type="text/css">
    body, html,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";}
    #allmap{width:100%;height:500px;}
        p{margin-left:5px; font-size:14px;}
    </style>

    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=GPjbTryF8Er4hTk6dwroUN0ZWXmLPXzD"></script>
    <title>北京大学地图展示</title>
</head>
<body>
    <div id="allmap"></div>
</body>
</html>
<script type="text/javascript">
    // var arr = [1,2,3,4,5];
    // function getNumNoRepeat(x) {
    //     var maxTimes = 20;
    //     do{
    //         var num = Math.floor(Math.random()*x)+1;
    //         if(-1 == arr.indexOf(num)){//数组中不存在
    //             arr.push(num);
    //             return num;
    //         }
    //         maxTimes--;
    //     }while (maxTimes);
    // }
    // 百度地图API功能
    var map = new BMap.Map("allmap");    // 创建Map实例
    map.centerAndZoom(new BMap.Point(116.31700, 39.997875), 17);  // 初始化地图,设置中心点坐标和地图级别
    //添加地图类型控件
    map.addControl(new BMap.MapTypeControl({
        mapTypes:[
            BMAP_NORMAL_MAP,
            BMAP_HYBRID_MAP
        ]}));     
    map.setCurrentCity("北京");          // 设置地图显示的城市 此项是必须设置的
    map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放
    var opts = {anchor:BMAP_ANCHOR_BOTTOM_RIGHT};     //设置定位按钮位置
    var ove={anchor:BMAP_ANCHOR_TOP_LEFT,type:BMAP_NAVIGATION_CONTROL_ZOOM};      //设置缩放按钮位置及类型
    map.addControl(new BMap.GeolocationControl(opts));        //将定位控件添加到地图上
    map.addControl(new BMap.NavigationControl(ove));         //添加缩放按钮
    // a = getNumNoRepeat(50);
    // b = getNumNoRepeat(50);
    // c = getNumNoRepeat(50);
    a = 0;
    // var pt = new BMap.Point(boxes_pos[a][0], boxes_pos[a][1]);
    var pt = new BMap.Point(116.31705, 39.99780);
    var myIcon = new BMap.Icon("{{ url_for('static', filename='imgs/treasure.jpg') }}", new BMap.Size(100,50));
    var marker2 = new BMap.Marker(pt,{icon:myIcon});  // 创建标注
    map.addOverlay(marker2);              // 将标注添加到地图中

    var geolocation = new BMap.Geolocation();

    var lng = 0;
    var lat = 0;

    window.setInterval(function() {
        geolocation.getCurrentPosition(function(r){
            if(this.getStatus() == BMAP_STATUS_SUCCESS){
                var mk = new BMap.Marker(r.point);
                map.addOverlay(mk);
                map.panTo(r.point);
                lng = r.point.lng;
                lat = r.point.lat;
                socket.emit('loc_sync', {'location': [lng, lat]});
                console.log(lng, lat);
                // alert('您的位置：'+r.point.lng+','+r.point.lat);
            }
            else {
                alert('failed'+this.getStatus());
            }        
        },{enableHighAccuracy: true});
    }, 3000);
    socket.on('room_sync', function(members, boxes) {
        // console.log("hi");
        // var members = [{'name': a, 'score': 12, 'location': [116.405+Math.random()*0.01, 39.916+Math.random()*0.01]}];
        // var boxes = [{'location': [116.405,39.916], 'openned': 0}];

          // members: list of dict of {'name': xxx, 'score': xxx, 'location': [x,y]}
          // boxes: list of dict of {'location': [x,y], 'openned': 0or1}
          for(var i in members){
            var member = members[i];
            map.clearOverlays();
            var marker = new BMap.Marker(new BMap.Point(member['location'][0], member['location'][1])); // 创建点
            map.addOverlay(marker);
            }
        }); 
          for(var j in boxes){
            var box = boxes[j];
            if (box['openned'] == 0){

                break;
            }
            

          }
       //清除覆盖物
    // function remove_overlay(){
    //    ();   map.clearOverlays       
    // }
    // //添加覆盖物
    // function add_overlay(){
    //     map.addOverlay(marker);            //增加点
    //     }

</script>
  {% endblock %}



